<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>苏宁 列表页</title>
</head>
<body>
      <script src="../../node_modules/lazyload.js"></script>
      <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
      <nav>
            <main>
                  <ul class="nav_main">
                        <a href="index.html" class="ToIndex">   
                             返回首页
                        </a>
                        <li class="list_login">
                              <div class="list_login_off active">
                                    <a href="login.html">请登录</a>
                              </div>
                              <div class="login_login_on">
                                    <p style="color:red">
                                        xxx  
                                    </p>
                                    
                                    <ol>
                                          <li>
                                                <a href="repassword.html">修改密码</a>
                                          </li>
                                          <li class="logout">退出登录</li>
                                    </ol>
                              </div>
                        </li>
                        
                        <a href="cart.html" class="goCart">购物车</a>
                        
                  </ul>
            </main>
      </nav>
      <header>
            <div class="list_logo">
           <img src="./img/snlogo.png" alt="">
            </div>
            <form class="list_srarch">
                <input type="text" class="list_search_inp">
                <button>搜 索</button>
            </form>
      </header>

      <section>
            <div class="list_top">
                  <!-- 分类 -->
                  <div class="list_class">
                        <div class="lef">
                              分 类
                        </div>
                        <ul class="rig">
                            <!-- JS 渲染实现 -->
                        </ul>

                  </div>
<!-- 筛选 -->
                  <div class="list_choose">
                    <div class="lef">
                        筛 选
                    </div>
                    <ul class="rig">
                        <li class="fliter_item active">全部</li>
                        <li class="fliter_item" data-type="sale">折扣</li>
                        <li class="fliter_item" data-type="hot">热销</li>
                    </ul>
                  </div>
<!-- 折扣 -->
                  <div class="list_sale">
                        <div class="lef">
                            折 扣
                        </div>
                        <ul class="rig">
                            <li class="sale_ active" data-sale="10">全部</li>
                            <li class="sale_" data-sale="5">5折</li>
                            <li class="sale_" data-sale="6">6折</li>
                            <li class="sale_" data-sale="7">7折</li>
                            <li class="sale_" data-sale="8">8折</li>
                            <li class="sale_" data-sale="9">9折</li>
                        </ul>
                      </div>
<!-- 排序 -->
                      <div class="list_sort">
                        <div class="lef">
                            排 序
                        </div>
                        <ul class="rig">
                            <li class="active sort_" data-meth="ASC" data-type="id">综合升序</li>
                            <li class="sort_" data-meth="DESC" data-type="id">综合降序</li>
                            <li class="sort_" data-meth="ASC" data-type="price">价格升序</li>
                            <li class="sort_" data-meth="DESC" data-type="price">价格降序</li>
                            <li class="sort_" data-meth="ASC" data-type="sale">折扣升序</li>
                            <li class="sort_" data-meth="DESC" data-type="sale">折扣降序</li>
                        </ul>
                      </div>

                      <!-- 分页 -->
                      <div class="list_page">
                        <div class="lef">
                            分 页
                        </div>
                        <ul class="rig">
                            <li class="pagelef">&lt;</li>
                            <li class="Page_total"></li>
                            <li class="pagerig">&gt;</li>
                            <li>
                              <select class="list_pigeSize">
                                    <option value="12">12</option>
                                    <option value="16">16</option>
                                    <option value="20">20</option>
                                    <option value="24">24</option>
                              </select>
                            </li>
                            <li class="choose_page">
                              <input type="text" placeholder="页码">
                            </li>
                            <li>
                              <button class="goToPage">跳 转</button>
                            </li>
                        </ul>
                      </div>

            </div>

            <ul class="list_bottom">
                  <!-- JS 渲染实现 -->
            </ul>

      </section>

      <footer>
      网页尾部
      </footer>
</body>
</html>